<template>
  <div id="v-mask">
    <el-dialog
      :title="mask.title"
      :visible.sync="mask.showMask"
      :width="mask.width"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="true"
      center
    >
      <div :class="{flex: mask.inline}" class="content body flex-wrap">
        <div
          v-for="(n1, i1) in mask.form"
          v-if="!n1.hidden"
          :key="n1.id"
          class="row-item clearfix"
        >
          <!--基本文本 text-->
          <template v-if="n1.type == 'text'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-input
                  :placeholder="n1.placeholder"
                  :disabled="n1.disabled"
                  v-model="n1.value"
                ></el-input>
              </span>
            </div>
          </template>
          <!--密码文本 password-->
          <template v-if="n1.type == 'password'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-input
                  :placeholder="n1.placeholder"
                  :disabled="n1.disabled"
                  v-model.trim="n1.value"
                  type="password"
                ></el-input>
              </span>
            </div>
          </template>
          <!--多文本框 textarea-->
          <template v-if="n1.type == 'textarea'">
            <div class="flex flex-nowrap">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-input
                  :type="n1.type"
                  :placeholder="n1.placeholder"
                  :disabled="n1.disabled"
                  :rows="n1.rows || 2"
                  v-model="n1.value"
                ></el-input>
              </span>
            </div>
          </template>
          <!--选择框 select-->
          <template v-if="n1.type == 'select'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-select
                  :clearable="n1.clearable"
                  v-model="n1.value"
                  :disabled="n1.disabled"
                  :placeholder="n1.placeholder"
                  @change="
                    FnMask({
                      type: 'selectChange',
                      content: {content: n1, index: i1},
                    })
                  "
                >
                  <el-option
                    v-for="item in mask[n1.name + 'Options']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  >
                  </el-option>
                </el-select>
              </span>
            </div>
          </template>
          <!--基础多选择框 multiple-select-->
          <template v-if="n1.type == 'multipleselect'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-select
                  :disabled="n1.disabled"
                  v-model="n1.value"
                  :placeholder="n1.placeholder"
                  multiple
                  collapse-tags
                >
                  <el-option
                    v-for="item in mask[n1.name + 'Options']"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </span>
            </div>
          </template>
          <!--颜色选择 color-->
          <template v-if="n1.type == 'color'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input flex flex-y-center"
              >
                <el-color-picker
                  :disabled="n1.disabled"
                  v-model="n1.value"
                  size="medium"
                ></el-color-picker>
              </span>
            </div>
          </template>
          <!--日期选择器 date-->
          <template v-if="n1.type == 'date'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-date-picker
                  :disabled="n1.disabled"
                  v-model="n1.value"
                  :placeholder="n1.placeholder"
                  type="date"
                >
                </el-date-picker>
              </span>
            </div>
          </template>
          <!--日期时间选择器-->
          <template v-if="n1.type == 'datetime'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-date-picker
                  :disabled="n1.disabled"
                  v-model="n1.value"
                  :placeholder="n1.placeholder"
                  type="datetime"
                >
                </el-date-picker>
              </span>
            </div>
          </template>
          <!--日期选择器 至 日期选择器-->
          <template v-if="n1.type == 'datepicker'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-date-picker
                  :disabled="n1.disabled"
                  v-model="n1.value"
                  :start-placeholder="n1.placeholder.split('@@@')[0]"
                  :end-placeholder="n1.placeholder.split('@@@')[1]"
                  :picker-options="n1.pickerOptions"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                >
                </el-date-picker>
              </span>
            </div>
          </template>
          <!--日期时间选择器 至 日期时间选择器-->
          <template v-if="n1.type == 'datetimepicker'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-date-picker
                  :disabled="n1.disabled"
                  v-model="n1.value"
                  :start-placeholder="n1.placeholder.split('@@@')[0]"
                  :end-placeholder="n1.placeholder.split('@@@')[1]"
                  :picker-options="n1.pickerOptions"
                  type="datetimerange"
                  range-separator="至"
                >
                </el-date-picker>
              </span>
            </div>
          </template>

          <!--单选框 radio-->
          <template v-if="n1.type == 'radio'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input"
              >
                <el-radio
                  v-for="n2 in n1.radio"
                  v-model="n1.value"
                  :key="n2.id"
                  :label="n2.value"
                  >{{ n2.label }}</el-radio
                >
              </span>
            </div>
          </template>

          <!--级联选择 cascader-->
          <template v-if="n1.type == 'cascader'">
            <div class="flex flex-nowrap flex-y-center">
              <span :class="{required: n1.required}" class="row-item-title">
                {{ n1.title }}
              </span>
              <span
                :style="{width: n1.width ? n1.width : '50%'}"
                class="span-input flex flex-y-center"
              >
                <el-cascader
                  v-model="n1.value"
                  :options="mask[n1.name + 'Options']"
                  :props="{checkStrictly: true}"
                  filterable
                  @change="
                    FnMask({
                      type: 'cascaderChange',
                      content: {content: n1, index: i1},
                    })
                  "
                ></el-cascader>
              </span>
            </div>
          </template>
        </div>
      </div>

      <span slot="footer" class="dialog-footer clearfix">
        <template v-if="mask.addShifts">
          <el-button @click="FnMask({type: 'cancel'})">取 消</el-button>
          <el-button
            :loading="mask.btnLoading"
            type="primary"
            @click="FnMask({type: 'addShifts', content: ''})"
            >确 定</el-button
          >
        </template>

        <template v-if="mask.addHoliday">
          <el-button @click="FnMask({type: 'cancel'})">取 消</el-button>
          <el-button
            :loading="mask.btnLoading"
            type="primary"
            @click="FnMask({type: 'addHoliday', content: ''})"
            >确 定</el-button
          >
        </template>

        <template v-if="mask.addStaff">
          <el-button @click="FnMask({type: 'cancel'})">取 消</el-button>
          <el-button
            :loading="mask.btnLoading"
            type="primary"
            @click="FnMask({type: 'addStaff', content: ''})"
            >确 定</el-button
          >
        </template>

        <template v-if="mask.Adjustment">
          <el-button @click="FnMask({type: 'cancel'})">取 消</el-button>
          <el-button
            :loading="mask.btnLoading"
            type="primary"
            @click="FnMask({type: 'Adjustment', content: ''})"
            >确 定</el-button
          >
        </template>

        <template v-if="mask.scheduling">
          <el-button @click="FnMask({type: 'cancel'})">取 消</el-button>
          <el-button
            :loading="mask.btnLoading"
            type="primary"
            @click="FnMask({type: 'scheduling', content: ''})"
            >确 定</el-button
          >
        </template>

        <template v-if="mask.leaveType">
          <el-button @click="FnMask({type: 'cancel'})">取 消</el-button>
          <el-button
            :loading="mask.btnLoading"
            type="primary"
            @click="FnMask({type: 'leaveType', content: ''})"
            >确 定</el-button
          >
        </template>

        <template v-if="mask.schedulingByDay">
          <el-button @click="FnMask({type: 'cancel'})">取 消</el-button>
          <el-button
            :loading="mask.btnLoading"
            type="primary"
            @click="FnMask({type: 'schedulingByDay', content: ''})"
            >确 定</el-button
          >
        </template>

        <template v-if="mask.schedulingByClass">
          <el-button @click="FnMask({type: 'cancel'})">取 消</el-button>
          <el-button
            :loading="mask.btnLoading"
            type="primary"
            @click="FnMask({type: 'schedulingByClass', content: ''})"
            >确 定</el-button
          >
        </template>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Vmask',
  components: {},
  props: {
    mask: {
      type: [Object, Array],
      default: () => {
        return {
          title: '默认标题',
          showMask: false,
          form: {},
          width: '28%',
          btnLoading: false,
        }
      },
    },
  },
  data() {
    return {
      play: {
        index: '',
        currentFile: '',
      },
      timeStart: new Date(),
      serviceCharge: {rate: '0.005'},
      panleDown: false,
    }
  },
  computed: {},

  watch: {},
  created() {},
  mounted() {},
  methods: {
    FnMask(obj) {
      this.panleDown = false
      let timeStart = this.timeStart
      let timeEnd = new Date()
      if (timeEnd - timeStart >= 1000) {
        switch (obj.type) {
          case 'selectChange':
            // 选择框改变
            this.$emit('FnMask', {type: obj.type, content: obj.content})
            break
          case 'cascaderChange':
            this.$emit('FnMask', {type: obj.type, content: obj.content})
            break
          default:
            // 默认都是把整个mask的数据回传
            this.$emit('FnMask', {type: obj.type, content: this.mask})
            break
        }
        this.timeStart = timeEnd
      }
    },
    handleClose(done) {
      this.$emit('FnMask', {type: 'cancel'})
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
#v-mask {
  .content.body.flex {
    .row-item {
      padding-top: 0;
      padding-bottom: 14px;
    }
  }

  .row-item {
    padding-top: 14px;

    &:first-child {
      padding-top: 0;
    }

    .row-item-title {
      box-sizing: border-box;
      position: relative;
      min-width: 120px;
      padding-right: 5px;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &::after {
        content: ':';
        font-weight: bold;
      }

      &.required::before {
        content: '*';
        color: red;
      }
    }
  }
}
</style>
